<template>
<div>
  <div class="hello page-body" @scroll="scroll">

      <Swiper auto loop :list="list" dots-position="center"></Swiper>
      <Search :scrollMove="scrollMove"></Search>
      <div id="list">
        <div v-for="(d,i) in data" :key="i" class="list-item">
          <img :src="'/images/'+d.img" >
          <div>{{d.name}}</div>
        </div>
      </div>
      
      <Divider><span class="fa fa-arrow-circle-o-up">推荐</span></Divider>

      <div id="recommend">
          <div v-for="(r,i) in recommend" :key="i" class="recommend-list">
          <router-link :to="'/product/'+r._id">
            <img :src="r.goodsOfImg[0]">
          <div>{{r.nameOfGoods}}</div>
          <div>￥{{r.price}}.00</div>
          </router-link>
        </div>
      </div>
      <div id="foot">
        <Foot></Foot>
      </div>
    
  </div>
  <Navbar></Navbar>
</div>
</template>

<script>

import {Swiper,Divider} from "vux";
import Foot from "../components/Foot.vue"
import Search from "../components/Search.vue";
import Navbar from "../components/Navbar.vue";
export default {
  components:{ Swiper,Search,Navbar,Divider,Foot},
  data:function(){
    return {
      scrollMove:0,
    }
  },
  mounted:function(){
    this.$store.dispatch("requestData");
    this.$store.dispatch("requestRecommend");
    this.$store.dispatch("requestIsLogin");
  },
  computed:{
    data:function(){
      return this.$store.state.data.data;
    },
    list:function(){
      return this.$store.state.data.list;
    },
    recommend:function(){
      return this.$store.state.recommend.data;
    }
  },
  methods:{
    scroll:function(e){
      this.scrollMove = e.target.scrollTop;
      // console.log(e.target.scrollTop);
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .page-body{
    overflow-y: scroll;
    height: calc(100vh - 50px);
  }
  .q{
    height: 2000px;
  }
  .hello{
    background-color: #cccccc;
  }

  #list{
    display: flex;
    text-align: center;
    font-size: 12px;
    flex-wrap: wrap;
    /* width: 100%; */
    justify-content: space-between;
    background-color: #fff;
  }
  .list-item{
    width: 15%;
    margin: 1vh 1vw
  }
  .list-item img{
    width: 100%;
  }
  #recommend{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  
  }
  .recommend-list{
    width: 49%;
    margin-top: 5px;
    background-color: #fff;
  }
    .recommend-list div{
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  .recommend-list img{
    width: 100%;
  }
  a{
    text-decoration: none;
    color: inherit;
  }
</style>
